<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>{$video_info.name}</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <!--weui.min.css-->
    <link rel="stylesheet" type="text/css" href="__STATIC__/zb/css/weui.min.css">
    <!--jquery-weui.min.css-->
    <link rel="stylesheet" type="text/css" href="__STATIC__/zb/css/jquery-weui.min.css">
    <link rel="stylesheet" href="__STATIC__/zb/css/base.css" />
    <link rel="stylesheet" type="text/css" href="__STATIC__/zb/css/font.css"/>
    <link rel="stylesheet" type="text/css" href="__STATIC__/zb/css/index.css"/>
    <script type="text/javascript" src="https://g.alicdn.com/de/prismplayer/1.9.9/prism-h5-min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://g.alicdn.com/de/prismplayer/1.9.9/skins/default/index-min.css"/>
    <style>
        .award{
            display: flex;
            flex-direction: row;
            width: auto;
        }
        .award img{
            width: 1.2rem;
            height: auto;
            vertical-align: middle;
            margin-top: .2rem;
        }
        .award .title{
            display: inline-block;
            width: 1.5rem;
            line-height: .75rem;
            height: 1.5rem;
        }
        .fixed1, .fixed2, .fixed3 {
            position: fixed;
            z-index: 10;
            width: 100%;
            box-sizing: border-box;
        }
        .fixed1 {
            top: 0;
        }
    </style>
</head>
<body>
	<!--注释-->
<div class="pageControl">
    <div class="top_box" style="position: fixed; top: 0; width:100%; z-index: 100; background: #fff; border-bottom: 1px solid #d9d9d9;">
        <!--<div class="pl videoImg fixed1">
            <video id="video" controls="controls" style="background:url({$video_info.image});">
                <source src="{$video_info.url}" type="video/mp4" />
                <source src="{$video_info.url}" type="video/ogg" />
                <source src="{$video_info.url}" type="video/webm" />
                <object data="{$video_info.url}" >
                    <embed src="{$video_info.url}" />
                </object>
            </video>
        </div>-->
        <div  class="prism-player pl videoImg fixed1" id="J_prismPlayer" style="position: absolute"></div>

        <div class="weui-cell fixed2">
            <div class="weui-cell__bd">
                <span>{$video_info.name}</span>
            </div>
            <a href="javascript:;" class="weui-cell__ft award">
                <span> <img src="__STATIC__/zb/img/j4.png" alt=""></span>
                <span class="title">打赏礼物</span>
            </a>
        </div>
        <div class="weui-cell evaluate fixed3">
            <div class="weui-cell__hd img_08 mr05 hot_count">
                <img  src="__STATIC__/zb/img/j6.png" alt="">
                <span>{$comment}</span>热评
            </div>
            <div class="weui-cell__bd">
                <input placeholder="我也来说两句" type="text" class="weui-input content" >
            </div>
            <div class="weui-cell__ft">
                <input type="button" class="send" value="发送">
            </div>
        </div>
    </div>
    <div class="append">
        <p style="text-align: center; padding: 2rem 0;" class="">评论加载中..</p>
    </div>
</div>


<div id="reward" class="popup-bottom weui-popup__container">
    <div class="weui-popup__overlay"></div>
    <div class="weui-popup__modal">
        <div class="money3">
            <div class="money-list">
                <a href="javascript:;" class="active" data-num="1">
                    <img src="/static/zb/img/j4.png" alt="">
                    <p class="text-center cl-f">1个</p>
                </a>
                <a href="javascript:;" data-num="5">
                    <img src="/static/zb/img/j4.png" alt="">
                    <p class="text-center cl-f">5个</p>
                </a>
                <a href="javascript:;" data-num="10">
                    <img src="/static/zb/img/j4.png" alt="">
                    <p class="text-center cl-f">10个</p>
                </a>
                <a href="javascript:;" data-num="100">
                    <img src="/static/zb/img/j4.png" alt="">
                    <p class="text-center cl-f">100个</p>
                </a>
            </div>
            <div class="moneyRow ">
                <div class="money1  pl">
                    <span class="cl-cc6">打赏元宝数: </span>
                    <input type="number" class="money1-input ingot_count text-center" value="1"><span class="cl-cc6">个</span>
                </div>
                <a class="money-fa" href="javascript:;">
                    <img src="/static/zb/img/da.png" alt="">
                </a>
            </div>

        </div>
    </div>
</div>
<script type="text/javascript" src="__STATIC__/zb/js/jquery-2.1.4.js"></script>
<script type="text/javascript" src="__STATIC__/home/jquery_weui/js/jquery-weui.js"></script>
<script type="text/javascript" src="__STATIC__/home/js/function.js"></script>

<!--阿里云视频播放器-->
<script>
    var player = new prismplayer({
        id: 'J_prismPlayer',
        width: '100%',
        height:'47%',
        autoplay: false,
        //支持播放地址播放,此播放优先级最高
        source : "{$video_info.url}",
        cover: "{$video_info.image}"
    });
</script>

<script>
    var videoWidth=$('#video').css('width');
    videoWidth=parseFloat(videoWidth);
    $('#video').css('height',videoWidth*9/16);

    $(".fixed2").css('top' , $(".fixed1").height());
    console.log($(".fixed1").height() + '--' + $(".fixed2").height());

    $(".fixed3").css('top' , $(".fixed1").height() + $(".fixed2").height() + 20);

    $(".pageControl").css('padding-top' , $(".fixed1").height() + $(".fixed2").height() + $(".fixed3").height() + 40);
    $(".top_box").css('height' , $(".fixed1").height() + $(".fixed2").height() + $(".fixed3").height() + 40);

    var obj = {
        is_more : true,
        t1: ''
    };

    $(function () {
        get_commemt_list('append');
        // 显示赠送礼物面板
        $('.award').click(function (e) {
            e.preventDefault();
            $('#reward').popup();
        });

        // 手动输入数字时匹配预定义四档元宝数量
        $(".ingot_count").keyup(function () {
            var num = $(this).val();
            $(".money-list a").removeClass('active');
            $("a[data-num='"+ num +"']").addClass('active');
        });

        // 选择预定义元宝数量
        $(".money-list a").click(function () {
            $(".money-list a").removeClass('active');
            $(this).addClass('active');
            $(".ingot_count").val($(this).data('num'));
        });

        // 支付赠送金额
        $(".money-fa").click(function (e) {
            window.clearInterval(obj.t1);
            var figure = $('.ingot_count').val();//赠送元宝数
            var price = figure*5;//订单总价
            var _data = {
                model : 'order_zb', // 订单模型（表名）
                num : figure, // 购买数量
                price : price, // 订单总价
                video_id : '{$video_info.id}'  // 视频ID
            };
            wechat_pay(_data);
        });

        // 发送评论信息
        $(".send").click(function () {
            var content = $(".content").val();
            if (!content) {
                $.toast("请输入评论内容", "text");
            }
            window.clearInterval(obj.t1);
            $.ajax({
                type : 'POST',
                url : '{:url("comment")}',
                data : {
                    content : content,
                    video_id : '{$video_info.id}'
                },
                dataType : 'json',
                success : function (msg) {
                    if (msg.code == 200) {
                        $(".content").val('');
                        get_commemt_list('prepend');
                    } else {
                        $.toast("系统繁忙", "cancel");
                    }
                }
            });
        });

        // 滚动页面加载更多
        $(window).scroll( function() {
            if (($(document).height() - $(this).scrollTop() - $(this).height()<50) && obj.is_more){
                get_commemt_list('append');
            }
        });

        // 点赞
        $(document).on('click', '.zan', function () {
            var _this = $(this);
//            _this.find('.praise').text(10);
            if (_this.find('img').hasClass('no-zan')) {
                return false;
            }
            $.get("{:url('zan')}", {id : _this.data('id'), video_id : '{$video_info.id}'}, function (msg) {
                if (msg.code == 200) {
                    _this.find('img').attr('src', '__STATIC__/zb/img/jj5.png').addClass('no-zan');
                    _this.find('.praise').text(msg.num);
                }
            }, 'json');
        });

        // 定时执行  获取最新数据
        obj.t1 = window.setInterval("get_commemt_list('prepend')",10000);


        //视频播放事件
        var video = document.getElementById("video");
        video.addEventListener("ended", function () {
            video.currentTime = 0;
        }, false);

    });

    // 获取评论数量
    function get_commemt_list(type) {
        window.clearInterval(obj.t1);
        var id = type == 'append' ? $('.appraise').last().data('id') : $('.appraise').first().data('id');
        $.ajax({
            type : 'POST',
            url : '{:url("get_comment_list")}',
            data : {
                type : type,
                id : id,
                video_id : '{$video_info.id}'
            },
            dataType : 'json',
            success : function (msg) {
                $(".comment_loading").remove();
                if (msg.code == 200) {
                    if (!id) {
                        $('.append').html(msg.tpl);
                    } else {
                        if (type == 'append') {
                            obj.is_more = msg.is_more;
                            $('.append').append(msg.tpl);
                            if (!msg.is_more) {
                                $('.append').append('<p style="text-align: center;">到底了</p>');
                            }
                        } else {
                            $('.append').prepend(msg.tpl);
                        }
                    }
                    $(".hot_count").find('span').text(msg.num);
                }
                obj.t1 = window.setInterval("get_commemt_list('prepend')",10000);
                console.log(msg);
            }
        });
    }
</script>
</body>
</html>

